<template>
  <view class="main">
    <scroll-view class="scroll" scroll-y="true">
      <!-- 普通提问 -->
      <view class="ask_header" v-if="!showMajorInfo">
        <view class="ask_header_content">
          <view class="step">
            <view class="step_num">1</view>
            <view class="step_text">提出问题</view>
          </view>
          <view class="step_line"></view>
          <view class="step">
            <view class="step_num">2</view>
            <view class="step_text">等待回复</view>
          </view>
          <view class="step_line"></view>
          <view class="step">
            <view class="step_num">3</view>
            <view class="step_text">开始回答</view>
          </view>
        </view>
      </view>

      <!-- 专家提问 -->
      <view class="ex_ask_header flex" v-if="showMajorInfo">
        <image
          class="ex_avatar"
          :src="majorInfo.user_info.avatar"
          mode="aspectFill"
        ></image>

        <view class="ex_info">
          <view class="title_info flex_align">
            <view class="ex_name fz32 bold mr20">
              {{ majorInfo.user_info.nickname }}
            </view>
            <view class="user_status">
              <view
                class="status_zx flex_align"
                v-if="majorInfo.is_online == 1"
              >
                <view class="st_dot1"></view>
                <view class="st_text">在线</view>
              </view>
              <view
                class="status_zx flex_align"
                v-if="majorInfo.is_online == 2"
              >
                <view class="st_dot2"></view>
                <view class="st_text">忙碌</view>
              </view>
              <view
                class="status_zx flex_align"
                v-if="majorInfo.is_online == 0"
              >
                <view class="st_dot3"></view>
                <view class="st_text">离线</view>
              </view>
            </view>
          </view>
          <view class="goodAt ellipsis1"
            >擅长：{{ majorInfo.user_info.major_direction }}</view
          >
        </view>
      </view>

      <view class="ask_textarea">
        <u--textarea
          v-model="askContent"
          placeholder="请详细描述问题，以便老师更好的理解问题并回答"
          border="none"
          count
          :maxlength="300"
          height="270rpx"
          confirmType="done"
        ></u--textarea>
        <view class="up_load">
          <view class="img_wrap" v-for="(item, index) in imgList" :key="index">
            <image
              class="up_img"
              :src="item"
              mode="aspectFill"
              @click="previewImage(item)"
            ></image>
            <image
              class="del"
              src="/static/img/exchange/del.png"
              mode="aspectFit"
              @click="deleteImg(index)"
            ></image>
          </view>
          <view
            class="img_wrap img_jia on flex_center_align flex_col"
            @click="uploadClick"
          >
            <u-icon name="plus" size="42rpx"></u-icon>
            <text class="icon_jia_text">上传图片</text>
          </view>
        </view>
      </view>

      <view class="perch"></view>
      <view class="ask_tags">
        <view class="tags_title">
          <text class="title_main">添加标签</text>
          <text class="title_sub">（匹配对应的专业老师）</text>
        </view>
        <view class="tags_list">
          <view
            class="selected_tag"
            v-for="(item, index) in tagsSelectedList"
            :key="index"
          >
            {{ item }}
          </view>
          <u-icon
            name="plus-circle"
            size="32"
            color="#999999"
            @click="showTags = true"
          ></u-icon>
        </view>
      </view>
      <view class="perch" v-if="activityLabel.length > 0"></view>
      <view class="ask_tags" v-if="activityLabel.length > 0">
        <view class="tags_title">
          <text class="title_main">添加活动标签</text>
          <text class="title_sub">（参加活动，进群参与抽奖）</text>
        </view>
        <view class="tags_choose">
          <view
            class="tags"
            @click="activitySelectTag(item)"
            :class="{ active: item.checked }"
            v-for="(item, index) in activityLabel"
            :key="index"
          >
            # {{ item.name }}
          </view>
        </view>
      </view>
      <view class="perch"></view>
    </scroll-view>
    <view class="ask_button">
      <view
        class="button_style active"
        @click="quickSubmit"
        v-if="userInfo1.is_wenda_vip == 0 || showMajorInfo"
        >发布问题
      </view>
      <view
        class="button_style button_style1"
        @click="quickSubmit"
        v-if="userInfo1.is_wenda_vip > 0 && !showMajorInfo"
      >
        会员免费提问
      </view>

      <!-- 关注微信公众号 -->
      <view class="follow" v-if="showFollow">
        <view class="left">
          <u-icon name="close" @click="showFollow = false"></u-icon>
          <image
            class="follow_icon"
            src="/static/img/exchange/wx.png"
            mode="scaleToFill"
          />
          <view class="follow_text">关注公众号，第一时间获取老师回答消息</view>
        </view>
        <view class="follow_button" @click="toAppJumpWx">去开启</view>
      </view>
    </view>

    <!-- 选择标签弹出层 -->
    <view v-show="showTags">
      <u-popup
        :show="showTags"
        @close="showTags = false"
        :closeOnClickOverlay="true"
      >
        <view class="tags_choose">
          <view
            class="tags"
            v-for="(item, index) in tagsList"
            :key="index"
            :class="{ active: item.checked }"
            @click="selectedTag(item)"
          >
            {{ item.name }}
          </view>
        </view>
      </u-popup>
    </view>
    <!-- 支付弹出层 -->
    <view v-show="showPay">
      <u-popup
        :show="showPay"
        :round="15"
        class="showPay"
        closeable
        @close="showPay = false"
        :closeOnClickOverlay="true"
      >
        <view class="pay_title">支付积分</view>
        <view class="middle_content flex_between">
          <view class="flex_align">
            <image
              class="pay_icon mr10"
              src="/static/img/exchange/leaf_green.png"
              mode="widthFix"
              style="vertical-align: bottom"
            ></image>

            <text class="txt_01">积分</text>
            <text class="price_num">{{ wenda_money }}</text>
          </view>
          <image
            class="pay_icon"
            src="/static/img/exchange/right.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="middle_content flex_between">
          <view class="flex_align">
            <image
              class="pay_icon mr10"
              src="/static/img/exchange/ticket_icon.png"
              mode="widthFix"
            ></image>
            <text class="txt_01">优惠券</text>
          </view>
          <view class="right">
            <view
              class="flex"
              v-if="couponList.length > 0"
              @click="goChooseCoupons"
            >
              <text class="tag_num" v-if="couponSelected == null"
                >{{ couponNum }}张可用</text
              >
              <text
                class="fz30 cff4"
                v-if="couponSelected != null && couponSelected.num_text > 0"
                >{{ couponSelected.num_text }}折</text
              >
              <text
                class="fz30 cff4"
                v-if="couponSelected != null && couponSelected.num_text == 0"
                >免费</text
              >
              <u-icon name="arrow-right"></u-icon>
            </view>
            <view class="flex" v-else>
              <text class="fz30 c999 mr10">暂无可用</text>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
        </view>

        <view class="pay_bottom_box">
          当前积分 {{ userInfo.money }}，
          <text class="goPay" @click="goPayMoney()">去充值</text>
        </view>
        <view class="sure_button close" @click="submitQuiz" :disabled="btnAble"
          >确定</view
        >
      </u-popup>
    </view>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../quiz/ask/index"
></script>
<style lang="scss" scoped>
body {
  background-color: #fff;
}
.main {
  position: relative;
  height: 100%;
  background-color: #fff;
  overflow: hidden;

  .scroll {
    height: calc(100vh - 130rpx);
    overflow: hidden;

    .ask_header {
      height: 100rpx;
      background-color: #eef6ff;
      display: flex;
      align-items: center;

      .ask_header_content {
        flex: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .step {
          display: flex;
          align-items: center;

          .step_num {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 32rpx;
            width: 32rpx;
            background-color: #1c87f3;
            color: #fff;
            font-size: 22rpx;
            border-radius: 32rpx;
          }

          .step_text {
            color: #1c87f3;
            font-size: 24rpx;
            margin-left: 10rpx;
          }
        }

        .step_line {
          width: 60rpx;
          height: 1rpx;
          background-color: #1c87f3;
        }
      }
    }
  }
}

.ex_ask_header {
  padding: 30rpx 40rpx;
  width: 750rpx;
  height: 147rpx;
  background: #eef6ff;

  .ex_avatar {
    margin-right: 30rpx;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
  }

  .user_status {
    .st_text {
      font-size: 24rpx;
    }

    .st_dot1 {
      width: 8rpx;
      height: 8rpx;
      background-color: #36ce50;
      border-radius: 50%;
      margin-right: 10rpx;
    }

    .st_dot2 {
      width: 8rpx;
      height: 8rpx;
      background-color: #ff6161;
      border-radius: 50%;
      margin-right: 10rpx;
    }

    .st_dot3 {
      width: 8rpx;
      height: 8rpx;
      background-color: #999999;
      border-radius: 50%;
      margin-right: 10rpx;
    }
  }

  .goodAt {
    margin-top: 20rpx;
    font-size: 24rpx;
    color: #666;
    width: 550rpx;
  }
}

.tags_list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .selected_tag {
    padding: 10rpx 30rpx;
    margin: 0 30rpx 20rpx 0;
    height: 56rpx;
    min-width: 108rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 74rpx;
    font-size: 28rpx;
    color: #ffffff;
    background: #1b6fff;
  }
}

.tags_choose {
  margin-top: 30rpx;
  display: flex;
  flex-wrap: wrap;

  .tags {
    padding: 10rpx 30rpx;
    display: flex;
    margin: 0 30rpx 20rpx 0;
    height: 56rpx;
    min-width: 108rpx;
    align-items: center;
    justify-content: center;
    border-radius: 74rpx;
    font-size: 28rpx;
    color: #666666;
    background: #f6f6f6;
  }

  .active {
    color: #ffffff;
    background: #1b6fff;
  }
}

.ask_textarea {
  .up_load {
    display: flex;
    flex-wrap: wrap;
    margin-top: 25rpx;
    padding: 0 30rpx;

    .del {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      position: absolute;
      top: -16rpx;
      right: -16rpx;
    }

    .img_wrap {
      position: relative;
      width: 116rpx;
      height: 116rpx;
      margin-top: 20rpx;
      margin-right: 20rpx;

      &.img_jia {
        margin: 20rpx auto 0;
        width: 116rpx;
        height: 116rpx;
        background: #ffffff;
        border-radius: 10rpx;
        border: 1px dashed #b0b0b0;
        overflow: hidden;

        .icon_jia_text {
          margin-top: 50rpx;
          font-size: 40rpx;
        }

        &.on {
          margin: 20rpx 20rpx 0 0;

          .icon_jia_text {
            color: #666;
            font-size: 22rpx;
            margin-top: 6rpx;
          }
        }
      }
    }

    .up_img {
      width: 116rpx;
      height: 116rpx;
      border-radius: 10rpx;
    }
  }
}

.perch {
  margin-top: 58rpx;
  height: 1rpx;
  background-color: #eee;
}

.ask_tags {
  margin-top: 30rpx;
  padding: 0 30rpx;

  .tags_title {
    margin-bottom: 30rpx;

    .title_main {
      margin-right: 10rpx;
      font-size: 30rpx;
      color: #333;
    }

    .title_sub {
      font-size: 24rpx;
      color: #999;
    }
  }

  .tags_choose {
    margin-top: 30rpx;
    display: flex;
    flex-wrap: wrap;

    .tags {
      padding: 10rpx 30rpx;
      display: flex;
      margin: 0 30rpx 20rpx 0;
      height: 56rpx;
      min-width: 108rpx;
      align-items: center;
      justify-content: center;
      border-radius: 74rpx;
      font-size: 28rpx;
      color: #666666;
      background: #f6f6f6;
    }

    .active {
      color: #ffffff;
      background: #1b6fff;
    }
  }
}

.ask_button {
  width: 100%;
  position: fixed;
  bottom: 0rpx;
  left: 0;
  background-color: #fff;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .button_style {
    margin-bottom: 37rpx;
    height: 90rpx;
    line-height: 90rpx;
    width: 100%;
    background: rgba(28, 135, 243, 0.3);
    color: #fff;
    font-size: 30rpx;
    border-radius: 132rpx;
    text-align: center;
  }

  .button_style1 {
    background: linear-gradient(90deg, #ff943f 5%, #ffca7a 96%);
  }
  .active {
    background-color: #1c87f3;
  }
}

// 关注公众号
.follow {
  width: 100vw;
  height: 88rpx;
  background: #eef1f6;
  padding: 0 41rpx 0 21rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    display: flex;
    align-items: center;
  }
  .follow_icon {
    width: 35rpx;
    height: 35rpx;
    margin: 0 10rpx 0 17rpx;
  }

  .follow_text {
    font-size: 24rpx;
    color: #333333;
  }

  .follow_button {
    font-size: 20rpx;
    color: #0b95fa;
    line-height: 20rpx;
    padding: 9rpx 21rpx 12rpx 21rpx;
    border-radius: 500rpx;
    border: 1rpx solid #0b95fa;
  }
}

.sure_button {
  margin: 20rpx auto;
  text-align: center;
  width: 647rpx;
  height: 85rpx;
  line-height: 85rpx;
  background: #1c87f3;
  border-radius: 147rpx;
  color: #fff;
}

.pay_icon {
  vertical-align: bottom;
  width: 42rpx;
  height: 42rpx;
}

.pay_title {
  padding: 50rpx;
  padding-top: 30rpx;
  color: #333333;
  font-weight: 600;
  font-size: 32rpx;
}

.txt_01 {
  margin-right: 85rpx;
  font-size: 36rpx;
}

.middle_content {
  padding: 0 50rpx;
  margin-bottom: 44rpx;
  .right {
    .tag_num {
      padding: 10rpx 13rpx;
      background: #fa5151;
      border-radius: 4rpx;
      font-size: 28rpx;
      color: #fff;
    }
  }
}

.pay_bottom_box {
  border-top: 1rpx solid #e2e2e2;
  padding: 25rpx 50rpx;
  width: 100%;
  height: 145rpx;
  color: #666666;
  font-size: 28rpx;
}

.goPay {
  color: #1c87f3;
  text-decoration: underline;
}

.price_num {
  font-size: 40rpx;
  color: #ff5900;
}

.ex_info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
